CSS 組合式宣告 - 新手開發從這裡開始進步 - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

第 11 屆 iThome 鐵人賽

DAY 6

Modern Web

金魚都能懂的 CSS 選取器 - 金魚都能懂了你還怕學不會嗎系列第 6 篇

CSS 組合式宣告 - 新手開發從這裡開始進步

11th鐵人賽 css教學網頁教學 css 金魚

CSScoke

2019-09-21 03:48:20

10114 瀏覽

分享至

本系列文章已集結成書，並於書中添加一些新篇章及細節補充，有興趣的朋友可至天瓏書局選購，感謝各位支持
購書連結 https://www.tenlong.com.tw/products/9789864344994?list_name=b-r30-zh_tw
讓我們好好善用CSS選取器吧

談完了 CSS 群組式宣告，接下就來談組合式宣告了，組合式宣告的方式基本上就是將多個選取方式合起來一起寫的作法，例如你有個物件同時是 <p> 標籤，而且他同時擁有 ID 以及 class 名稱，就像下面這樣

<p class="amos" id="handsome">...內文略</p>

這時候不管你的 CSS 選取器是寫 p 或者是 .amos 又或者是 #handsome 選到的都是同一個目標對象，那我們也可以把它當作BBQ串成一串串燒樣的寫法，像是下面這樣

p.amos#handsome{ ...略 }

或下面這樣

p#handsome.amos{ ...略 }

請注意！每個選取器之間是沒有空格的！當你把 同一個目標對象 用該對象具備的多個選取器選取他的時候，就不該有空格，聽起來很囉唆嗎？就讓我們繼續看下去。

舉個生活一點的例子

你跟小明小美是同一個班上的同學，然後特別的是你跟小明同時外號都相同，這時候可能會出現的狀況會是

姓名（內容文字）	學號（ID）	綽號（class）	職務（tag）
Amos	A001	帥哥	班長
小明	A002	帥哥	同學
小美	A003	美女	風紀

如果老師對著班上喊我要找帥哥，那就會出現 Amos 跟小明兩個人都應答的情況，但是老師明明要找的是帥哥 Amos，而不是帥哥小明啊，所以老師可以怎麼喊呢？那當然是越詳細的把你想找的人的特徵都講出來就越不會找錯人啦！所以應該是喊「學號是A001的帥哥班長」，這樣就絕對不會找錯人了，如果將老師喊的這一句話轉換成 CSS 的話，那麼你的選取器大概會長成這樣 班長#A001.帥哥 或 班長.帥哥#A001 ，但切記班長千萬不可以出現在整串選取器的後面，不然就會變成是 ID 或 class了（因為跟在點號或井號的後方）。

同樣的道理，在我們的網頁中也有可能會出現以下狀況：

<input type="button" class="btn" value="詳細內容">
<input type="button" value="詳細內容">

<a href="#" class="btn">詳細內容</a>
<a href="#">詳細內容</a>

<button class="btn">詳細內容</button>
<button>詳細內容</button>

上面是一個不同標籤套用著相同 class 名稱的一種狀況，此時我想要選取到 a 標籤且他同時具有 btn 這個 class 的話，你選標籤的話就會多選到第二個超連結，但是如果是選 .btn 這個 class 的話，又會選到其他我不想選到的對象，那這時就非常適合使用組合式宣告的方式了，我就把兩個選取器，也就是兩個條件寫出來，符合規則的自然就會被選取到了，所以我只需要寫 a.btn 就能選取到我要的目標對象了。

CSS 組合式宣告實務應用面

在實際的應用中，我們可以利用組合 CSS 選取器的方式來篩選出我們想要選取的對象，如果你的網頁在一開始架構就寫的不是非常妥善時，就是不管是哪個標籤都套用了相同的 class 名稱，這時候你要篩選就會變得異常困難，所以妥善的運用 CSS 組合式宣告，你可以更順利一點，當然截至目前 Amos 所講的選取器還是眾多選取器中的一小塊，可能你還無法體會到 CSS 組合式宣告的優點跟強大，但只要耐心跟著完這 30 天，我相信你的 CSS 選取器能力會大大的躍進的喔。以下列出幾個實際應用面的需求，以及會使用到的寫法給各位參考

需求一: 我要讓超連結的外觀跟按鈕有所差異，但希望他們的尺寸佔位是一樣的

<button class="btn">放入願望清單</button>
<a class="btn">加入購物車</a>
<input class="btn" type="submit" value="送出">

.btn{
	display: inline-block;
	border:1px solid #aaa;
	background-color: #eee;
	padding: 0 1em;
	line-height: 1.5em;
}
a.btn{
	background-color: transparent;
	border-color: transparent
}

需求二: 我要讓圖片文繞圖，但如果是 div 的話就不要文繞圖

.note{ border: 5px solid #fff; }
img.note{ float:right }

需求三: 我要選取同時擁有 .list-item 以及 .active 的物件(通常用在選單)

<ul class="list">
<li class="list-item active">文字</li>
<li class="list-item">文字</li>
<li class="list-item">文字</li>
<li class="list-item">文字</li>
</ul>